Jamstackホスティング決定版? Cloudflare Pagesを試してみたよ！

小西諒

2021.03.03

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Cloudflareから、JamstackサイトがホストできるCloudflare Pages（Beta版）がリリースされました！

Cloudflare Pagesとは

CDNやセキュリティのSaaSで有名なCloudflareが提供する、静的サイトのホスティングサービスです。

NetlifyやVercel（過去に書いたVercelの記事はこちら）と競合する位置づけで、Githubのリポジトリからソースを引っ張ってきて、静的で高速なウェブサイトを簡単にビルド&デプロイできます。

前提

今回はGatsby + Contentfulで構築したアプリを、Cloudflare Pagesでホストしてみようと思います。

アプリの構築からやりたい方は、過去に書いた記事を参考にしてみてください。

CircleCI × Contentful × S3で作るJamstackなブログ環境。

また、Githubリポジトリを作成し、masterブランチにソースコードをプッシュしておきます。Cloudflare Pagesのチュートリアルでは丁寧に最初から説明してくれてますのでまだの方は参考にしてみてください。

早速使ってみるよ

基本的な使い方はひっじょうに簡単で、Githubリポジトリを選び、ビルドコマンドや環境変数を入力し、デプロイするだけです。

早速やってみます。Cloudflareにログインするとサイドバーに機能が追加されてますね。

[Create a Project]からGithubアカウントを連携し、ソースを取得するリポジトリを選択します。

ビルドとデプロイの設定画面です。

[Framework preset]でGatsbyを選択。本日時点で他にもReact, Vue, Nuxtなどなどほぼ網羅されてます。

もし自前のビルド処理を行いたい場合、[Build command]に、ビルド時に実行したいコマンドを入力します。

今回はバックエンドとしてContentfulと連携しているため、[Environment variables]にContentfulのスペースIDとシークレットトークンを入力しています。

これで[Save and Deploy]。

最初はイニシャライズでちょっと待ちましたが、[Deploying to Cloudflare's global network]までFinishしたら完了です。

リアルタイムでビルドとデプロイのログが見れますので、どこで処理がつまづいたか、またビルド時間のボトルネックの調査なども行いやすいです。

完了すると[Project Name].pages.devのようなURLが発行されるので、アクセスしてみます。

成功しました！やはり簡単すぎる・・・。

以降、Githubの連携ブランチにpushするたびにCloudflare Pagesでもビルド&デプロイ処理が走ります。

プレビューモードで本番デプロイ前に確認する

現在1つのプロジェクトは1つのリポジトリとの連携ですが、本番展開前に、新しいバージョンをデプロイなしにチェックできるプレビューモードがあります。

Githubでプルリクエストが作成されるたびに、Cloudflare側で、本番環境と切り離されたプレビュー環境に自動でデプロイを行い、aa28bb7b.sample-app.pages.devのようなランダムな文字列が付与されたURLを発行してくれます。

デフォルトではこのプレビューURLも公開されているのですが、Cloudflare Accessを使ってアクセス制限をかけることが可能です。

環境変数の使い分け

例えば本番とテストでバックエンドシステムを分けたい場合も、本番とプレビューモードそれぞれで環境変数を設定できます。

他サービスからの乗り換え

既存Jamstackホスティングサービスのユーザーに対する気遣いも抜かりなく、NetlifyやVercelから乗り換えたい人向けのチュートリアルがあります。

どのサービスを使っていても基本的にソースはリポジトリ管理しているだけのはずなので、主にビルドコマンドをCloudflareに移行するだけで使い始めることができますね。

料金体系

記事執筆時点で、無料プランでは下記をカバーしています（料金ページ）。

月500回のデプロイ
20,000ファイル
10カスタムドメイン
最大25MBのファイルサイズ
無制限のユーザー数
無制限のプレビューデプロイ

個人利用&業務用の検証では十分すぎると思います。

カスタムドメイン

Pagesで構築したJamstackサイトにSSL証明書ありの独自ドメインを当てることもできます。

独自ドメインを当てるには、Cloudflareにドメイン登録をすることが必要です。

ドメインをRoute53など外部で管理している場合、Cloudflareが発行するNSレコードを外部サービス側に登録してドメイン管理をCloudflareに移行し、Pagesアプリのcnameを登録します。もしくはcnameとtxtレコードを直接外部DNSサービス側で登録することも可能ですが、Cloudflareのプロキシ機能などを使いたい方はCloudflare側での管理が便利です。

完了すると、SSLが適用されたドメインでアクセスできるようになります。